.main {
  position: relative;
  padding-top: 90px;
  background-color: #f6f6f6;
  .banner {
    width: 100%;
    vertical-align: top;
  }
  .record-content-title {
    padding-top: 70px;
    padding-bottom: 60px;
    font-size: 24px;
    color: #333;
    &:after {
      content: '';
      display: block;
      margin: 10px auto 0;
      width: 56px;
      border: 2px solid #00B169;
    }
  }
  .record-content-01 {
    border-bottom: 1px solid #eee;
    background: #fff;
    .record-content-desc {
      width: 1100px;
      margin: 0 auto;
      font-size: 16px;
      color: #666666;
    }
    .record-icon-list {
      width: 1100px;
      height: 264px;
      padding-top: 84px;
      padding-bottom: 110px;
      margin: 0 auto;
      color: #666666;
      .record-icon-list-li {
        float: left;
        width: 250px;
        height: 282px;
        .list-li-bg {
          margin: 32px auto;
        }
        .text {
          text-align: center;
          font-size: 16px;
        }
      }
      .record-li-active {
        background-color: #fff;
        box-shadow: 8px 16px 43px 0 rgba(181, 181, 181, 0.18);
        border-radius: 6px;
        color: #37C05E;
      }
      @for $i from 1 through 4 {
        .record-icon-list-li#{$i} {
          .list-li-bg {
            margin: 32px auto;
            background-image: url('../images/record-icon-0#{$i}-0.png');
            background-repeat: no-repeat;
            background-size: cover;
          }
        }
      }
    }
  }
  .record-content-02 {
    background: #FAFBFF;
    padding-bottom: 134px;
    .record-content-02-01 {
      width: 1100px;
      margin: 0 auto;
      position: relative;
      .record-content-02-title:before {
        content: '';
        position: absolute;
        left: -78px;
        top: -10px;
        width: 60px;
        height: 60px;
        background: url('../images/part02-icon1.png') no-repeat;
        background-size: cover;
      }
      .record-content-02-desc {
        height: 250px;
        padding-top: 54px;
        padding-bottom: 62px;
        .classify01 {
          float: left;
          margin-right: 50px;
          background: url('../images/part02-1.png') no-repeat;
          background-size: cover;
        }
        .classify02 {
          float: left;
          background: url('../images/part02-2.png') no-repeat;
          background-size: cover;
        }
        .classify {
          color: #FFFFFF;
          position: relative;
          width: 524px;
          height: 250px;
          .classify1 {
            position: absolute;
            top: 28px;
            left: 50px;
            font-size: 30px;
          }
          .classify2 {
            position: absolute;
            top: 40px;
            left: 236px;
            font-size: 16px;
          }
          .classify3 {
            position: absolute;
            top: 110px;
            left: 52px;
            width: 392px;
            font-size: 14px;
          }
        }
      }
    }
    .record-content-02-02 {
      position: relative;
      width: 1100px;
      margin: 0 auto;
      .record-content-02-title:before {
        content: '';
        position: absolute;
        left: -78px;
        top: -10px;
        width: 60px;
        height: 60px;
        background: url('../images/part02-icon2.png') no-repeat;
        background-size: cover;
      }
      .record-content-02-desc {
        width: 1142px;
        height: 238px;
        margin-top: 38px;
        background: #FFFFFF;
        box-shadow: 0 10px 35px 0 rgba(0, 0, 0, 0.09);
        border-radius: 5px;
        .desc-list {
          float: left;
          width: 12.5%;
          text-align: center;
          .list-icon {
            margin: 70px auto 20px;
            background-repeat: no-repeat;
            background-size: cover;
          }
          .list-text {
            font-size: 16px;
            color: #666666;
          }
        }
        @for $i from 1 through 8 {
          .desc-list#{$i} {
            .list-icon {
              background-image: url('../images/record-desc-icon#{$i}.png');
            }
          }
        }
      }
    }
    .record-content-02-title {
      font-size: 30px;
      color: #333333;
    }
  }
  .record-content-03 {
    background-color: #81DA8E;
    .record-content-title {
      color: #fff;
      &:after {
        content: '';
        display: block;
        margin: 10px auto 0;
        width: 56px;
        border: 2px solid #fff;
      }
    }
    .record-content-03-desc {
      .desc-l {
        background: url('../images/record03-bg.png') no-repeat;
        background-size: contain;
        width: 46%;
      }
      .desc-r {
        color: #FFFFFF;
        width: 28.5%;
        padding-right: 200px;
        margin-left: 80px;
        .desc-r-title {
          font-size: 44px;
          margin-top: 20%;
          margin-bottom: 30px;
          white-space: nowrap;
        }
        .desc-r-text {
          font-size: 24px;
          margin-bottom: 70px;
        }
        .desc-r-icon {
          margin-top: 80px;
          font-size: 16px;
          text-align: center;
          .icon-list {
            width: 18%;
            float: left;
            margin-right: 32px;
            white-space: nowrap;
            .icon {
              margin-bottom: 22px;
              img {
                width: 100%;
              }
            }
          }
          .icon-list:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
  .record-content-04 {
    background: #FAFBFF;
    border-bottom: 1px solid #eee;
    .record-content-04-desc {
      margin: 80px auto 0;
      background: url('../images/record04-bg.png') no-repeat;
      background-size: cover;
    }
  }
  .record-content-05 {
    height: 780px;
    background: #FBFBFB;
    padding-bottom: 100px;
    .record-content-05-desc {
      width: 1250px;
      height: 650px;
      margin: 0 auto;
      .list-li {
        float: left;
        margin-right: 8px;
        position: relative;
        width: 260px;
        padding: 16px 20px;
        background: #FFFFFF;
        box-shadow: 4px 9px 15px 6px rgba(108, 108, 108, 0.14);
        border-radius: 6px;
        text-align: center;
        margin-bottom: 50px;
        font-size: 28px;
        color: #333333;
        .list-li-icon {
          // background-repeat: no-repeat;
          // background-size: cover;
          margin-bottom: 28px;
          img {
            width: 100%;
          }
        }
        .mask {
          position: absolute;
          left: 19px;
          top: 17px;
          display: none;
          padding: 48px 25px;
          width: 212px;
          height: 77px;
          background: rgba(0, 0, 0, 0.4);
          border-radius: 6px;
          font-size: 20px;
          color: #FFFFFF;
          text-align: center;
        }
      }
      .mr0 {
        margin-right: 0;
      }
      @for $i from 1 through 8 {
        .list-li#{$i} {
          .list-li-icon {
            // background-image: url('../images/part05-#{$i}.png');
          }
        }
      }
    }
  }
}
